<!DOCTYPE html>
<html>
<head>
    <title>设置个人资料</title>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="/js/bootstrap/css/bootstrap.min.css">
    <script src="/js/jquery/jquery.min.js"></script>
    <script src="/js/bootstrap/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="/css/font/css/font-awesome.min.css"/>
    <link rel="stylesheet" href="/css/reset.css"/>
    <link rel="stylesheet" href="/css/myInfo.css"/>
    <script src="/js/plugins/dialog/dialog.min.js"></script>
    <script src="/js/plugins/jquery-form/jquery.form.js"></script>
    <script src="/js/plugins/jrender/jrender.js"></script>
    <script type="text/javascript">
        $(function () {
            // 设置个人信息数据回显, 从sessionStorage中获取
            var user = JSON.parse(sessionStorage.getItem('user'));
            console.log(user);
            // jrender渲染数据
            $(".info").renderValues(user);
            // 背景图片渲染
            $(".myBg").css("background-image", "url('"+user.coverImgUrl+"')");

            // 处理图片上传
            // 1. 头像
            // $("#headImg,#headBtn").click(function () {
            //     // 打开文件上传选择器, 使用模拟点击的方式
            //     $("#imgForm input[name='pic']").click();
            //     // 判断是否选择了图片, 只有选择了图片才进行上传操作
            //     if ($("#imgForm input[name='pic']").val()){
            //         $("#imgForm").ajaxSubmit(function (data) {
            //             // 将返回的data中的imgURL设置到头像中, 回显
            //             $("#headImg").attr("src",data.imgUrl);
            //             // 将头像url以隐藏域的形式设置到infoForm
            //             $("#infoForm input[name='headImgUrl']").val(data.imgUrl);
            //         })
            //     }
            // })
            // 2.背景图片
            // $("#coverBtn").click(function () {
            //     // 打开文件上传选择器, 使用模拟点击的方式
            //     $("#imgForm input[name='pic']").click();
            //     // 判断是否选择了图片, 只有选择了图片才进行上传操作
            //     if ($("#imgForm input[name='pic']").val()){
            //         $("#imgForm").ajaxSubmit(function (data) {
            //
            //             if (data.status==1) {
            //                 // 将返回的data中的imgURL设置到头像中, 回显
            //                 $(".myBg").css("background-image", "url('"+data.imgUrl+"')");
            //                 // 将背景图片url以隐藏域的形式设置到infoForm
            //                 $("#infoForm input[name='coverImgUrl']").val(data.imgUrl);
            //             } else {
            //                 alert(data.msg);
            //             }
            //         });
            //     }
            // });


            // 优化图片上传
            // 定义一个变量由于区别是头像上传 / 背景图片上传
            var flag = true;

            // 头像上传
            $("#headImg,#headBtn").click(function () {
                flag = true;
                // 打开文件上传选择器, 使用模拟点击的方式
                $("#imgForm input[name='pic']").click();
            });

            // 背景图片上传
            $("#coverBtn").click(function () {
                flag = false;
                // 打开文件上传选择器, 使用模拟点击的方式
                $("#imgForm input[name='pic']").click();
            });

            // 设置文件上传值改变事件
            $("#imgForm input[name='pic']").change(function () {
                // 判断是否有选择图片
                if ($("#imgForm input[name='pic']").val()){
                    // 使用ajax的方式上传图片
                    $("#imgForm").ajaxSubmit(function (data) {
                        // 判断图片是否上传成功
                        if (data.status == 1){
                            // 说明图片上传成功
                            // 区分头像上传 / 背景图片上传
                            if (flag){
                                // 头像上传--回显头像--设置头像的路径到隐藏域中, 用于更新
                                // 将返回的data中的imgURL设置到头像中, 回显
                                $("#headImg").attr("src",data.url);
                                // 将头像url以隐藏域的形式设置到infoForm
                                $("#infoForm input[name='headImgUrl']").val(data.url);
                            } else {
                                // 背景图片上传
                                // 将返回的data中的imgURL设置到头像中, 回显
                                $(".myBg").css("background-image", "url('"+data.url+"')");
                                // 将背景图片url以隐藏域的形式设置到infoForm
                                $("#infoForm input[name='coverImgUrl']").val(data.url);
                            }
                        } else {
                            // 上传的图片非法, 弹框提示
                            // 注册失败, 弹出注册失败提示信息
                            $(document).dialog({
                                titleText: '温馨提示',
                                content: data.msg
                            });
                        }
                    });
                }
            });

            // 保存按钮点击事件
            $("#saveBtn").click(function () {
                $.ajax({
                    url: "/users/" + user.id,// 访问资源
                    data:$("#infoForm").serialize(),// 参数序列化
                    type: "PUT",// 动作
                    success: function (data) {
                        console.log(data);
                        // 更新本地缓存
                        data.data.email = user.email;
                        sessionStorage.setItem("user", JSON.stringify(data.data));
                        // 重新刷新页面到个人信息中
                        location.href = "/mine/profiles.html";
                    }
                })
            })
        });
    </script>
</head>

<body>
<form id="imgForm" action="/images" method="post" enctype="multipart/form-data">
    <input type="file" name="pic" style="display: none;" accept="image/*"/>
</form>

<div class="search-head">
    <div class="row nav-search">
        <div class="col">
            <a href="javascript:window.history.go(-1);">
                <span>取消</span>
            </a>
        </div>
        <div class="col">
            <span>设置个人资料</span>
        </div>
        <div class="col">
            <a href="javascript:;" role="button" id="saveBtn">
                <span>保存</span>
            </a>
        </div>
    </div>
</div>

<div class="container info">
    <div class="myBg">
        <img id="headImg" class="rounded-circle" render-src="headImgUrl"/>
        <div class="editHead" id="headBtn">
            <i class="fa fa-pencil-square fa-lg" aria-hidden="true"></i>
        </div>
        <button class="btn btn-outline-light ibtn " id="coverBtn">设置背景</button>
    </div>
    <form id="infoForm" method="post">
        <input type="hidden" name="id" render-value="id">
        <input type="hidden" name="headImgUrl" render-value="headImgUrl"/>
        <input type="hidden" name="coverImgUrl" render-value="coverImgUrl"/>
        <label>昵称</label>
        <input type="text" name="nickName" class="form-control" render-value="nickName">
        <label>性别</label>
        <select class="form-control" name="gender" render-value="gender">
            <option value="-1">保密</option>
            <option value="0">男</option>
            <option value="1">女</option>
        </select>
        <label>地区</label>
        <input type="text" name="place" class="form-control" render-value="place">
        <label>签名</label>
        <textarea name="sign" class="form-control" rows="5" render-html="sign"></textarea>
    </form>
</div>

</body>
</html>
